<template>
  <div class="material-video">
    <el-card shadow="never" class="selectCard">
      <el-form label-position="right" label-width="6rem">
        <el-row>
          <el-col :span="8">
            <el-form-item label="文档名称：">
              <el-input v-model="searchParams.name" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="排序规则：">
              <el-select v-model="searchParams.rule" @change="getMaterialList(1)">
                <el-option :value="1" label="按更新时间" />
                <el-option :value="2" label="按上传时间" />
                <el-option :value="3" label="按名称顺序" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="float: right;align-items: center;justify-content: center;">
            <SearchButton :default-params="searchParams" @refreshParams="refreshParams" @getList="getList1" />
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="content">
      <div class="left">
        <el-card shadow="never">
          <!-- <el-checkbox v-model="checkAll" class="mr10" @change="changeAll">全选</el-checkbox> -->
          <el-button type="primary" size="small" @click="openAddDialog">添加</el-button>
          <el-button size="small" @click="delAll">批量删除</el-button>
          <el-button size="small" @click="openMoveDialog('')">批量移动</el-button>
          <div class="mb10" />
          <vxe-table
            ref="xTree"
            text-algin="center"
            border
            stripe
            resizable
            highlight-hover-row
            :data="list"
            :auto-resize="true"
            :height="616"
          >
            <vxe-table-column type="checkbox" width="35" />
            <vxe-table-column field="name" min-width="120" title="文档名称" />
            <vxe-table-column width="120" align="center" title="操作" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="openMoveDialog(scope.row.id)">移动分组</el-button>
                <el-button size="mini" type="text" @click="delOne(scope.row.id)">删除</el-button>
              </template>
            </vxe-table-column>
          </vxe-table>
          <vxe-pager
            :current-page.sync="searchParams.pageNum"
            :page-size.sync="searchParams.pageSize"
            :total="total"
            :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
            @page-change="getMaterialList"
          />
        </el-card>
      </div>
      <div class="right">
        <el-card shadow="never" class="mb10">
          <div class="flex-b mb10 fz14">
            <div>
              文档分组
            </div>
          </div>
          <el-input v-model="groupName" class="search-btn" placeholder="分组名称">
            <template slot="append">
              <el-button @click="getMaterialGroupList">搜索</el-button>
            </template>
          </el-input>
          <el-tree
            class="fz14"
            :data="treeList"
            :highlight-current="true"
            :expand-on-click-node="false"
            default-expand-all
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ data }" class="custom-tree-node">
              <span>{{ data.name }} ({{ data.sourceCount }})</span>
            </span>
          </el-tree>
        </el-card>
        <el-card shadow="never">
          <div class="flex-b font-size12">
            <el-button size="small" @click="openGroupDialog">添加分组</el-button>
            <el-button size="small" @click="openRenameDialog">修改分组</el-button>
            <el-popover v-model="delPopver" placement="top" width="400">
              <p>确定删除所选分组吗？</p>
              <p>组内全部文档将自动归入未分组。</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="delPopver = false">取消</el-button>
                <el-button type="primary" size="mini" @click="delMaterialGroup">确定</el-button>
              </div>
              <el-button slot="reference" size="small">删除分组</el-button>
            </el-popover>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog v-if="groupDialog" width="30%" :title="groupTitle" :visible.sync="groupDialog" :close-on-click-modal="false">
      <el-form ref="groupForm" :model="groupParams" :rules="groupRules" label-width="7rem">
        <el-row>
          <el-col :span="23">
            <el-form-item prop="name" label="分组名称：">
              <el-input v-model="groupParams.name" />
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item prop="sort" label="排序：" class="flex-just">
              <div class="flex1">
                <el-input-number v-model="groupParams.sort" :precision="0" :controls="false" />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="groupDialog = false">取 消</el-button>
        <el-button type="primary" @click="clickSureGroup">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="addDialog" width="40%" title="添加" :visible.sync="addDialog" :close-on-click-modal="false">
      <el-form ref="addForm" :model="addParams" :rules="addRules" label-width="7rem">
        <el-row>
          <el-col :span="23">
            <el-form-item prop="parentId" label="所在分组：">
              <el-select v-model="addParams.parentId" filterable placeholder="请选择">
                <el-option v-for="item in selectList" :key="item.value" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item prop="sources" label="选择文档：">
              <div style="flex: 1">
                <UploadBtn :multiple="true" :file-filter="['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'txt']" :max-size="20" :limit="9999" @setUrl="addUrl" />
                <ul>
                  <li v-for="(item, index) in addParams.sources" :key="index">
                    <p style="margin: 0 0 5px 0">
                      <span>{{ item.name }}</span>
                      <el-button class="fr" type="text" @click="delVideo(index)">删除</el-button>
                    </p>
                  </li>
                </ul>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="clickSureAdd">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="renameDialog" width="30%" title="修改" :visible.sync="renameDialog" :close-on-click-modal="false">
      <el-form ref="renameForm" :model="renameParams" :rules="renameRules" label-width="7rem">
        <el-row>
          <el-col :span="23">
            <el-form-item prop="name" label="分组名称：">
              <el-input v-model="renameParams.name" />
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item prop="sort" label="排序：" class="flex-just">
              <div class="flex1">
                <el-input-number v-model="renameParams.sort" :precision="0" :controls="false" />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="renameDialog = false">取 消</el-button>
        <el-button type="primary" @click="clickSureRename">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="moveDialog" title="移动分组" :visible.sync="moveDialog" :close-on-click-modal="false">
      <el-form ref="moveForm" :model="moveParams" :rules="moveRules" label-width="7rem">
        <el-row>
          <el-col :span="13">
            <el-form-item prop="parentId" label="移动分组：">
              <el-select v-model="moveParams.parentId" filterable placeholder="请选择">
                <el-option v-for="item in selectList" :key="item.value" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="moveDialog = false">取 消</el-button>
        <el-button type="primary" @click="clickSureMove">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchButton from '@/components/SearchButton'
import { getMaterialGroupList, addMaterialGroup, renameGroup, delMaterialGroup, addMaterial, getMaterialList, delMaterial, moveGroup } from '@/api/cop/source'
import UploadBtn from '@/components/upload/uploadBtn'

export default {
  components: {
    SearchButton,
    UploadBtn
  },
  data() {
    return {
      checkAll: false,
      moveDialog: false,
      moveParams: {
        parentId: '',
        ids: []
      },
      moveRules: {
        parentId: [{ required: true, message: '请选择分组', trigger: 'change' }]
      },
      tagList: [{ name: '不限', value: '' }, { name: 'doc', value: 'doc' }, { name: 'docx', value: 'docx' }, { name: 'xlsx', value: 'xlsx' }, { name: 'ppt', value: 'ppt' }, { name: 'pptx', value: 'pptx' }, { name: 'pdf', value: 'pdf' }, { name: 'txt', value: 'txt' }],
      groupName: '',
      searchParams: {
        parentId: '',
        type: 4,
        rule: 1,
        name: '',
        contentType: '',
        pageNum: 1,
        pageSize: 20
      },
      total: 1,
      list: [],
      delPopver: false,
      renameDialog: false,
      renameParams: {
        name: ''
      },
      renameRules: {
        name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
      },
      treeList: [],
      selectList: [],
      checked: false,
      name: '',
      groupDialog: false,
      groupParams: {
        type: 4
      },
      groupRules: {
        name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
      },
      groupTitle: '',
      addDialog: false,
      addParams: {
        type: 4,
        parentId: '',
        sources: []
      },
      addRules: {
        parentId: [{ required: true, message: '请选择分组', trigger: 'change' }],
        sources: [{ type: 'array', required: true, message: '请选择文档', trigger: 'change' }],
        name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getMaterialGroupList()
  },
  methods: {
    delVideo(i) {
      this.addParams.sources.splice(i, 1)
    },
    refreshParams(params) {
      this.groupName = ''
      this.searchParams = params
      this.getMaterialGroupList()
    },
    getList1() {
      this.getMaterialGroupList()
    },
    openMoveDialog(id) {
      if (id === '') {
        const arr = this.$refs.xTree.getCheckboxRecords().map(item => item.id)
        if (arr.length === 0) {
          this.$message.error('请选择文档')
          return false
        }
        this.moveParams.ids = arr
      } else if (id !== '') {
        this.moveParams.ids = [id]
      }
      this.moveParams.parentId = ''
      this.moveDialog = true
    },
    clickSureMove() {
      this.$refs.moveForm.validate((valid) => {
        if (valid) {
          moveGroup(this.moveParams).then(res => {
            this.$message.success('移动成功！')
            this.getMaterialGroupList()
            this.moveDialog = false
          })
        }
      })
    },
    delAll() {
      this.moveParams.ids = this.$refs.xTree.getCheckboxRecords().map(item => item.id)
      if (this.moveParams.ids.length === 0) {
        this.$message.error('请先选择文档')
        return false
      }
      this.del()
    },
    delOne(id) {
      this.moveParams.ids = [id]
      this.del()
    },
    del() {
      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMaterial({ ids: this.moveParams.ids }).then(res => {
          this.$message.success('删除成功！')
          this.getMaterialGroupList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    changeAll(val) {
      this.list.forEach(item => {
        item.ischeck = this.checkAll
      })
    },
    changeOne(value) {
      this.checkAll = this.list.length === this.list.filter(item => item.ischeck).length
    },
    getMaterialList(type) {
      if (type === 1) {
        this.searchParams.pageNum = 1
      }
      getMaterialList({ ...this.searchParams }).then(res => {
        this.checkAll = false
        res.records.forEach(item => {
          item.ischeck = false
        })
        this.total = res.total
        this.list = res.records
      })
    },
    getMaterialGroupList(type = 0) {
      getMaterialGroupList({ type: 4, name: this.groupName }).then(res => {
        this.treeList = res
        this.selectList = res[0].children
        if (res.length !== 0 && type === 0) {
          this.searchParams.parentId = ''
          this.getMaterialList()
        }
      })
    },
    changeGroup() {
      this.$refs.group.dropDownVisible = false
    },
    openGroupDialog() {
      this.groupTitle = '添加'
      this.groupParams = {
        type: 4
      }
      this.groupDialog = true
    },
    clickSureGroup() {
      this.$refs.groupForm.validate((valid) => {
        if (valid) {
          this.groupParams.parentId = this.treeList[0].id
          addMaterialGroup(this.groupParams).then(res => {
            this.getMaterialGroupList()
            this.$message.success('添加成功！')
            this.groupDialog = false
          })
        }
      })
    },
    openAddDialog() {
      this.addParams.parentId = ''
      this.addParams.sources = []
      this.addDialog = true
    },
    addUrl(url, name = '') {
      this.addParams.sources.push({
        name: name,
        path: url,
        contentType: url.split('.')[1]
      })
    },
    clickSureAdd() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          addMaterial(this.addParams).then(res => {
            this.$message.success('添加成功！')
            this.addDialog = false
            this.getMaterialGroupList()
          })
        }
      })
    },
    handleNodeClick(data) {
      this.renameParams.id = data.name === '全部' ? '' : data.id
      this.renameParams.sort = data.sort
      this.renameParams.name = data.name
      this.searchParams.parentId = data.name === '全部' ? '' : data.id
      this.getMaterialList(1)
    },
    delMaterialGroup() {
      if (this.renameParams.id === undefined) {
        this.$message.error('请先选择分组')
        this.delPopver = false
        return false
      }
      if (this.renameParams.name === '全部' || this.renameParams.name === '未分组') {
        this.$message.error('此分组不允许删除！')
        this.delPopver = false
        return false
      }
      delMaterialGroup({ id: this.renameParams.id }).then(res => {
        this.getMaterialGroupList()
        this.$message.success('删除成功！')
        this.delPopver = false
      })
    },
    openRenameDialog() {
      if (this.renameParams.id === undefined) {
        this.$message.error('请先选择分组')
        return false
      }
      if (this.renameParams.name === '全部' || this.renameParams.name === '未分组') {
        this.$message.error('此分组不允许修改')
        return false
      }
      this.renameDialog = true
    },
    clickSureRename() {
      if (this.renameParams.name === '全部' || this.renameParams.name === '未分组') {
        this.$message.error('此分组不允许修改！')
        return false
      }
      this.$refs.renameForm.validate((valid) => {
        if (valid) {
          renameGroup(this.renameParams).then(res => {
            this.getMaterialGroupList()
            this.renameDialog = false
            this.$message.success('修改成功！')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.material-video {

}
</style>
